<template>
  <a-layout-header class="header">
    <div class="logo">
      <router-link to="/welcome">
        食趣相投
      </router-link>
    </div>

    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/index">
        <router-link to="/index">
          <CoffeeOutlined/> &nbsp; 首页
        </router-link>
      </a-menu-item>
      <a-menu-item key="/recommend">
        <router-link to="/recommend">
          <UserOutlined /> &nbsp; 菜谱
        </router-link>
      </a-menu-item>
      <a-menu-item key="/main">
        <router-link to="/main">
          <UserOutlined /> &nbsp; 饮食健康
        </router-link>
      </a-menu-item>
      <a-menu-item key="/geography">
        <router-link to="/geography">
          <UserOutlined /> &nbsp; 地域美食
        </router-link>
      </a-menu-item>
      <a-menu-item key="/recipelist">
        <router-link to="/recipelist">
          <UserOutlined /> &nbsp; 我的食谱
        </router-link>
      </a-menu-item>
      <a-menu-item key="/about">
        <router-link to="/about">
          <UserOutlined /> &nbsp; 我的关注
        </router-link>
      </a-menu-item>
    </a-menu>
    <div>
      <p v-if="username">
        欢迎您:
        <router-link to="/info">
          {{ username }}
        </router-link> &nbsp;&nbsp;
        <a-button type="default" @click="Logout">退出登录</a-button>
      </p>
      <p v-else>
        <span>
          <router-link to="/login">
            登录
          </router-link> /
        </span>
        <span>
          <router-link to="/register">
            去注册
          </router-link>
        </span>
      </p>
    </div>
  </a-layout-header>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import router from '@/router';
import { notification } from 'ant-design-vue';
import { CoffeeOutlined, UserOutlined } from '@ant-design/icons-vue';

const selectedKeys = ref([]);

watch(() => router.currentRoute.value.path, (newValue) => {
  selectedKeys.value = [newValue];
}, { immediate: true });

const Logout = () => {
  localStorage.removeItem('Token');
  notification.success({ description: '登出成功' });
  router.push('/login');
};

const getUsernameFromToken = (token) => {
  try {
    const payload = token.split('.')[1];
    const decodedPayload = window.atob(payload);
    const payloadJson = JSON.parse(decodedPayload);
    return payloadJson.username;
  } catch (error) {
    console.error('解析 Token 失败:', error);
    return null;
  }
};

const username = ref('');

onMounted(() => {
  const token = localStorage.getItem('Token');
  if (token) {
    username.value = getUsernameFromToken(token);
  }
});

</script>

<style scoped>
.header {
  background-color: #001529; /* 深色背景，增强对比度 */
  color: #ffffff; /* 文本颜色为白色 */
  display: flex; /* 使用Flexbox布局来更好地控制子元素 */
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: space-between; /* 两端对齐子元素 */
  padding: 0 20px; /* 内边距，确保元素不会紧贴边缘 */
  height: 64px; /* 保持与菜单行高一致 */
}

.logo {
  float: none; /* 移除浮动，因为已经在Flexbox布局中 */
  height: auto; /* 自动高度，根据内容调整 */
  width: auto; /* 自动宽度，根据内容调整 */
  font-weight: bold; /* 加粗标题字体 */
  font-size: 24px; /* 稍微增大字体大小 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
}

.header div:nth-child(2) { /* 第二个div，包含用户名和退出登录链接 */
  display: flex;
  align-items: center;
  gap: 10px; /* 子元素之间的间距 */
}

.header a {
  color: #ffffff; /* 链接颜色为白色 */
  text-decoration: none; /* 移除下划线 */
  font-size: 16px; /* 链接字体大小 */
}

.header a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 菜单样式调整 */
.a-menu {
  display: flex;
}

.a-menu-item {
  margin-right: 20px; /* 菜单项之间的间距 */
}

/* 图标样式调整（如果图标大小需要调整） */
.a-menu-item svg {
  margin-right: 8px; /* 图标与文本之间的间距 */
  width: 20px; /* 图标大小 */
  height: 20px; /* 图标大小 */
}
</style>